<!--
 * @Author: Zhang Yingying
 * @Date: 2020-11-16 18:54:58
 * @LastEditors: Zhang Yingying
 * @LastEditTime: 2020-11-19 13:51:06
-->
<script>
  var checked = {}
  import BaseDialog from '@/components/BaseDialog/index.vue'
  import Component from 'vue-class-component'
  import assetApi from '@/api/AssetApi'
  import { baseURL } from '@/config/settings'
  import _ from 'lodash'
  @Component({
    name: 'SelectDialog',
  })
  export default class SelectDialog extends BaseDialog {
    get title() {
      return '请选择要关联的图片资源'
    }

    length = 0

    get table() {
      return this.$refs.table
    }

    reloadTable(back2first) {
      this.table && this.table.reload(back2first)
    }

    columns = {
      assetName: {
        label: '资源名称',
        align: 'center',
      },
      serverPath: {
        label: '资源预览',
        align: 'center',
      },
      operation: {
        label: '操作',
        align: 'center',
      },
    }

    setModel(data) {
      // data.forEach((row) => {
      //   this.checked[row.id] = row
      // })
      return this
    }

    opened() {
      this.reloadTable(true)
    }

    onSubmit() {
      if (this.length == 0) {
        this.$message.error('请选择需要关联的资源!')
        return
      }
      this.$emit('selected', Object.values(_.cloneDeep(checked)))
      this.onClose()
    }

    onClose() {
      checked = {}
      this.length = 0
      this.closeDialog()
    }

    config = {
      selection: false,
      height: '300px',
      getData: async ({ pageSize, pageNum }) => {
        let result = {
          data: [],
          total: 0,
        }
        let resp = await assetApi.getAll({
          offset: pageNum,
          opactiy: pageSize,
        })
        if (resp && resp.data) {
          result.total = resp.data.total
          result.data = resp.data.data.map((x) => {
            return {
              ...x,
              checked: !!checked[x.id],
            }
          })
        }
        return result
      },
    }

    handleChange(row) {
      checked[row.id] = row.checked ? row : false
      this.length = Object.values(checked).filter((x) => !!x).length
    }

    renderBody(h) {
      return (
        <div>
          <h3 class="tips">最多选择 5 项，当前已选 {this.length} 项</h3>
          <BaseTable
            ref="table"
            {...{
              props: {
                columns: this.columns,
                config: this.config,
              },
              scopedSlots: {
                serverPath: ({ row }) => {
                  return (
                    <el-image
                      style="width: 100px; height: 100px"
                      src={baseURL + row.serverPath}
                      fit="fit"
                    ></el-image>
                  )
                },
                operation: ({ row }) => {
                  if (checked[row.id] && this.length >= 5) {
                    return (
                      <el-checkbox
                        on-change={(val) => {
                          this.handleChange(row)
                        }}
                        v-model={row.checked}
                      >
                        选择
                      </el-checkbox>
                    )
                  }
                  return this.length < 5 ? (
                    <el-checkbox
                      on-change={(val) => {
                        this.handleChange(row)
                      }}
                      v-model={row.checked}
                    >
                      选择
                    </el-checkbox>
                  ) : null
                },
              },
            }}
          ></BaseTable>
        </div>
      )
    }
  }
</script>

<style lang="scss" scoped>
  .tips {
    margin-bottom: 10px;
  }
</style>
